<template>
    <div>
        <input type="text" v-model="state.mytext">
        <button @click="handleClick">add</button>
        <ul>
            <li v-for="(data,index) in state.datalist" :key="data">{{ data }} <button @click="handleDel(index)">删除</button></li>
        </ul>
    </div>
</template>

<script>
import { reactive, toRef, toRefs } from 'vue'
export default {
    setup() {
        const state = reactive({
            mytext: '',
            datalist: ['111', '222', '333']
        })
        // console.log(toRefs(state));
        const handleClick = () => {
            state.datalist.push(state.mytext);
            state.mytext = '';
        }
        const handleDel = (index) => {
            state.datalist.splice(index, 1);
        }
        return {
            ...toRefs(state),
            state: state,
            handleClick, handleDel,
        }

    }
}
</script>